/* eslint-disable */
<template>
    <ul class="scott">
        <!--        <span class="disabled"></span>-->
        <li v-for="pageCount in extraData.pageCount">
            <span class="current rounded" v-if="pageCount === extraData.currentPage">{{extraData.currentPage}}</span>
            <a class="rounded" v-else @click="pageTo(pageCount)">{{pageCount}}</a>
        </li>
    </ul>
</template>
<script>
    export default {
        props: {
            extraData: {}
        },
        methods: {
            pageTo(pageCount) {
               this.$emit('pageTo', pageCount)
            }
        }
    }
</script>
<style scoped>
    /*css scott style pagination*/
    li {
        display: inline
    }

    ul.scott {
        padding: .5rem 0;
        text-align: left;
    }

    ul.scott a, ul.scott span {
        padding: .1rem .33rem
    }

    ul.scott a {
        border: #ddd 1px solid;
        color: #88af3f;
        margin: 0 .15rem 0 0;
        text-decoration: none;
    }

    ul.scott a:hover {
        border: #85bd1e 1px solid;
        color: #638425;
        background-color: #f1ffd6;
    }

    ul.scott a:active {
        border: #85bd1e 1px solid;
        color: #638425;
        background-color: #f1ffd6;
    }

    ul.scott span.current {
        border: #2500FF 1px solid;
        font-weight: bold;
        color: #fff;
        margin: 0 .15rem 0 0;
        background-color: #2500FF;
    }

    ul.scott span.disabled {
        border: #f3f3f3 1px solid;
        color: #638425;
        margin: 0 .15rem 0 0;
    }
</style>